計算屬性

• 前面幾天所學的程式中，我們定義的屬性都是儲存屬性，也就是說儲存屬性的值是我們直接定義好的，當前屬性只是具備儲存這些值的作用。
• 在Vue中還有計算屬性，它是透過一些計算邏輯來即時地維護當前屬性的值，以上一篇的程式為基礎，若需要在元件中定義一個type屬性，當元件的count屬性小於10時，type屬性的值為「小」，反之則為「大」。

const App ={
    data() {
        return {
            count:0
        }
    },
    //computed選項定義屬性
    computed: {
        type() {
            return this.count > 10 ? "大" : "小"
        }
    },
    methods: {
        add() {
            this.count ++
        }
    }
}
//建立元件並獲取元件
let instance = Vue.createApp(App).mount("#Application")
console.log(instance.type)       
//像存取普通屬性一樣存取計算屬性

• 以上這段程式，計算屬性定義在Vue元件的computed選項中，在使用時，可以像存取普通屬性一樣進行存取，通常計算屬性最終的值都是由儲存屬性透過邏輯運算計算得來的。
• 計算屬性的優勢在於當會影響值的儲存屬性發生變化時，計算屬性也會同步更新，如有元素綁定了計算屬性，也同樣會進行更新。

<div id="Application">
    <div>{{type}}</div>
    <button @click="add">Add</button>
</div>

• 這段程式在點擊頁面上的按鈕時，若元件count的值大於10時，頁面上對應的文字內容會更新為「大」。

使用計算屬性或函數

• 以效果而言，使用函數同樣也可以達到計算屬性的部分效果。

//HTML元素
<div id="Application">
    <div>{{typeFunc()}}</div>
    <button @click="add">Add</button>
</div>

//Vue元件定義
const App ={
    data() {
        return {
            count:0
        }
    },
    computed: {
        type() {
            return this.count > 10 ? "大" : "小"
        }
    },
    methods: {
        add() {
            this.count ++
        },
        typeFunc() {  //此函數的作用與計算屬性type相似
            return this.count > 10 ? "大" : "小"
        }
    }
}

• 這段程式是使用函數來達成計算屬性type的功能，從程式的執行行為來看，使用函數與使用計算屬性的結果完全一致。
• 但事實上，計算屬性是基於其所依賴的儲存屬性值的變化而重新計算的，計算完成後，其結果會被快取，下次存取計算屬性時，只要其所依賴的屬性無任何改變，則邏輯程式就不會重複執行。
• 函數則不同，每次存取時都會重新執行邏輯程式，因此，在實際應用中可以依據是否需要快取作為選擇使用計算屬性或函數的條件。

今天的內容就先到這邊，明天會繼續介紹計算屬性的賦值。